<script setup>
import { useEventListener } from '@vueuse/core'
import { match } from 'pinyin-pro'

const props = defineProps({
  word: {
    type: String,
    default: '',
  },
})
const emit = defineEmits(['select', 'close'])
const commandList = ref([
  {
    action: 1,
    command: '请假',
    describe: '发起请假申请',
    name: 'createLeaveForm',
    entryId: 1,
    actionParams: '{"templateId":10}',
  },
  {
    action: 1,
    command: '加班',
    describe: '发起加班申请',
    name: 'createOvertimeForm',
    entryId: 2,
    actionParams: '{"templateId":11}',
  },
  {
    action: 1,
    command: '报销',
    describe: '发起报销申请',
    name: 'createFinanceForm',
    entryId: 3,
    actionParams: '{"templateId":13}',
  },
  {
    action: 1,
    command: '补卡',
    describe: '发起补卡申请',
    name: 'createMendClockForm',
    entryId: 4,
    actionParams: '{"templateId":16}',
  },
  {
    action: 1,
    command: '入职',
    describe: '发起入职申请',
    name: 'createOnboardingForm',
    entryId: 5,
    actionParams: '{"templateId":20}',
  },
  {
    action: 1,
    command: '离职',
    describe: '发起离职申请',
    name: 'createResignationForm',
    entryId: 6,
    actionParams: '{"templateId":30}',
  },
  {
    action: 1,
    command: '转正',
    describe: '发起转正申请',
    name: 'createRegularizationForm',
    entryId: 7,
    actionParams: '{"templateId":18}',
  },
  {
    action: 1,
    command: '用印',
    describe: '发起用印申请',
    name: 'createSealForm',
    entryId: 8,
    actionParams: '{"templateId":19}',
  },
  // { command: '加班', describe: '发起加班申请', type: 1 },
])

const activeIndex = ref(0)

const filterCommand = computed(() => {
  return commandList.value.filter(
    (i) =>
      i.command.includes(props.word) || match(i.command, props.word)?.length || match(i.describe, props.word)?.length
  )
})

/**
 * 手动点击选择用户
 */
function selectCommand(command) {
  emit('select', { text: command.command, command })
}

useEventListener('keydown', (e) => {
  // 退出
  if (e.code === 'Escape') {
    emit('close')
    // 向上选择
  } else if (e.code === 'ArrowUp') {
    if (activeIndex.value === 0) {
      activeIndex.value = filterCommand.value.length - 1
    } else {
      activeIndex.value--
    }
    // 向下选择
  } else if (e.code === 'ArrowDown') {
    if (activeIndex.value === filterCommand.value.length - 1) {
      activeIndex.value = 0
    } else {
      activeIndex.value++
    }
    // 确认选择
  } else if (e.code === 'Enter' || e.code === 'NumpadEnter') {
    const command = filterCommand.value[activeIndex.value]
    if (command) {
      selectCommand(command)
    }
  }
})
</script>

<template>
  <div class="command-text">
    <template v-if="filterCommand.length">
      <div
        class="command-item"
        :class="{ active: activeIndex === index }"
        v-for="(item, index) in filterCommand"
        :key="item.command"
        @click="selectCommand(item)">
        <span>/{{ item.command }}</span>
        <span class="describe">{{ item.describe }}</span>
      </div>
    </template>
    <div v-else class="command-item">
      <span>没找到命令</span>
      <span class="describe">试一试别的命令</span>
    </div>
  </div>
</template>

<style scoped lang="scss">
.command-text {
  height: 100%;
  width: 300px;
  overflow-y: auto;
  .command-item {
    @include use-flex(center, space-between);
    cursor: pointer;
    font-size: 13px;
    padding: 5px 10px;
    .describe {
      font-size: 12px;
      color: var(--elp-color-info-light-3);
    }
    &.active,
    &:hover {
      font-weight: bolder;
      background-color: var(--elp-color-info-light-9);
    }
  }
}
</style>
